<script setup>
import {h, ref} from "vue";
import {PlusOutlined,DeleteOutlined,AuditOutlined,SearchOutlined} from "@ant-design/icons-vue";
// 按钮相关
const open1 = ref(false);
const open2 = ref(false);
const open3 = ref(false);
const showModal1 = () => {
  open1.value = true;
};
const showModal2 = () => {
  open2.value = true;
};
const showModal3 = () => {
  open3.value = true;
};
const handleOk1 = () => {
  open1.value = false;
};
const handleOk2 = () => {
  open2.value = false;
};
const handleOk3 = () => {
  open3.value = false;
};
//数据源
const dataSource = ref([{"sparePart_id":"1","sparePart_name":"备件1","sparePart_model":"型号一",
  "sparePart_figure":"ggg","unit":"PCS","safety_stock":"5","current_inventory":"5"},{"sparePart_id":"2","sparePart_name":"备件2","sparePart_model":"型号一",
  "sparePart_figure":"gpppg","unit":"PCS","safety_stock":"9","current_inventory":"5"}])


</script>

<template>


  <!--条-->
  <a-card class="page-container" title="设备台账" head-style="font-size:30px">

    <!--弹窗1详情-->
    <a-modal v-model:open="open1" @ok="handleOk1" style="width: 75%" >
      <template #title>
        <span style="font-size: 25px;">详情</span>
      </template>
      <a-form class="input-list">
        <a-divider/>
        <div style="width: 100%;" class="input-div">
          <a-form-item class="input-item">
            <a-space>
              <span style="color:red">*编&emsp;&thinsp;&thinsp;&thinsp;&thinsp;码:</span>
              <a-input style="width: 200%;"></a-input>
            </a-space>
          </a-form-item>
          <a-form-item label="规格型号:" class="input-item">
            <a-input ></a-input>
          </a-form-item>
          <a-form-item class="input-item">
            <a-space>
              <span style="color:red">*名&emsp;&thinsp;&thinsp;&thinsp;&thinsp;称:</span>
              <a-input style="width: 200%;"></a-input>
            </a-space>
          </a-form-item>
          <a-form-item label="图&emsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;号:" class="input-item">
            <a-input></a-input>
          </a-form-item>
          <a-form-item label="单&emsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;位:" class="input-item">
            <a-input></a-input>
          </a-form-item>
          <a-form-item label="安全库存:" class="input-item">
            <a-input></a-input>
          </a-form-item>
          <a-form-item label="当前库存:" class="input-item">
            <a-input></a-input>
          </a-form-item>

        </div>
        <a-divider />

        <!--书签-->
        <a-tabs type="card" >
          <a-tab-pane key="1" tab="所属设备">
            <a-table>
              <a-table-column title="编码" data-index="id" align="center"/>
              <a-table-column title="名称" data-index="name" align="center"/>
              <a-table-column title="规格" data-index="model" align="center"/>
              <a-table-column title="操作"  align="center">
                <a-button type="primary" style="background: red">删除</a-button>
              </a-table-column>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" tab="库存明细">
            <a-table>
              <a-table-column title="批次" data-index="maintenance_id" align="center"/>
              <a-table-column title="库位" data-index="date" align="center"/>
              <a-table-column title="数量" data-index="maintainer" align="center"/>
              <a-table-column title="单位" data-index="maintainer" align="center"/>
              <a-table-column title="价格" data-index="maintainer" align="center"/>
              <a-table-column title="金额" data-index="maintainer" align="center"/>
              <a-table-column title="供应商" data-index="maintainer" align="center"/>

            </a-table>
          </a-tab-pane>
        </a-tabs>



        <!--分割线-->
        <a-divider style="height: 1px; background-color: black"  />
      </a-form>
    </a-modal>

    <!--弹窗2修改-->
    <a-modal v-model:open="open2" title="改造" @ok="handleOk2" style="width: 75%" >
      <template #title>
        <span style="font-size: 25px;">修改</span>
      </template>
      <a-form class="input-list">
        <a-divider/>
        <div style="width: 100%;" class="input-div">
          <a-form-item class="input-item">
            <a-space>
              <span style="color:red">*编&emsp;&thinsp;&thinsp;&thinsp;&thinsp;码:</span>
              <a-input style="width: 200%;"></a-input>
            </a-space>
          </a-form-item>
          <a-form-item label="规格型号:" class="input-item">
            <a-input ></a-input>
          </a-form-item>
          <a-form-item class="input-item">
            <a-space>
              <span style="color:red">*名&emsp;&thinsp;&thinsp;&thinsp;&thinsp;称:</span>
              <a-input style="width: 200%;"></a-input>
            </a-space>
          </a-form-item>
          <a-form-item label="图&emsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;号:" class="input-item">
            <a-input></a-input>
          </a-form-item>
          <a-form-item label="单&emsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;位:" class="input-item">
            <a-input></a-input>
          </a-form-item>
          <a-form-item label="安全库存:" class="input-item">
            <a-input></a-input>
          </a-form-item>
          <a-form-item label="当前库存:" class="input-item">
            <a-input></a-input>
          </a-form-item>

        </div>
        <a-divider />

        <!--书签-->
        <a-tabs type="card" >
          <a-tab-pane key="1" tab="所属设备">
            <a-table>
              <a-table-column title="编码" data-index="id" align="center"/>
              <a-table-column title="名称" data-index="name" align="center"/>
              <a-table-column title="规格" data-index="model" align="center"/>
              <a-table-column title="操作"  align="center">
                <a-button type="primary" style="background: red">删除</a-button>
              </a-table-column>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" tab="库存明细">
            <a-table>
              <a-table-column title="批次" data-index="maintenance_id" align="center"/>
              <a-table-column title="库位" data-index="date" align="center"/>
              <a-table-column title="数量" data-index="maintainer" align="center"/>
              <a-table-column title="单位" data-index="maintainer" align="center"/>
              <a-table-column title="价格" data-index="maintainer" align="center"/>
              <a-table-column title="金额" data-index="maintainer" align="center"/>
              <a-table-column title="供应商" data-index="maintainer" align="center"/>

            </a-table>
          </a-tab-pane>
        </a-tabs>



        <!--分割线-->
        <a-divider style="height: 1px; background-color: black"  />
      </a-form>
    </a-modal>

    <!--弹窗3处置-->
    <a-modal v-model:open="open3" title="申请" @ok="handleOk3" style="width: 50%">
      <template #title>
        <span style="font-size: 25px;">申请</span>
      </template>

    </a-modal>
    <template #extra>
      <div class="header">
        <div class="extra">
          <a-button type="primary"><PlusOutlined />新增</a-button>
          <a-button type="primary" danger><DeleteOutlined />删除</a-button>
          <a-button type="primary" style="background: gold"><AuditOutlined />审核</a-button>
        </div>
      </div>
    </template>
    <a-form layout="inline" class="a-form" style="height: 60px">
      <a-space direction="horizontal" >
        <a-form-item>
          <a-input placeholder="编码" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="名称" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="规格" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="状态" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="等级" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :icon="h(SearchOutlined)">查找匹配项</a-button>
        </a-form-item>
      </a-space>
    </a-form>
    <!-- 设备台账列表 -->
    <a-table :dataSource="dataSource"  style="width: 100%;" :row-selection="{}">

      <a-table-column title="编码" data-index="sparePart_id" align="center"/>
      <a-table-column title="名称" data-index="sparePart_name" align="center"/>
      <a-table-column title="规格型号" data-index="sparePart_model" align="center"/>
      <a-table-column title="图号" data-index="sparePart_figure" align="center"/>
      <a-table-column title="单位" data-index="unit" align="center"/>
      <a-table-column title="安全库存" data-index="safety_stock" align="center"/>
      <a-table-column title="当前库存" data-index="current_inventory" align="center"/>
      <a-table-column title="操作" width="10%" align="center">
        <template #default="{ row }">
          <div style=" display: flex;justify-content: center;align-items: center;">
            <a-button type="primary" style="background: #EA5413" @click="showModal1">详情</a-button>
            <a-button type="primary" @click="showModal2">改造</a-button>
            <a-button type="primary" style="background: gold" @click="showModal3">申请</a-button>
          </div>
        </template>
      </a-table-column>
    </a-table>
  </a-card>


</template>


<style lang="scss" scoped>
.page-container{
  margin-top: 2%;
  width: 98%;
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .a-form{
    display: flex;
    align-items: center;

  }
  a-table{
    &-column{

    }
  }
}
.input-list{
  .input-div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-left: 5%;
    padding-right: 5%;
    .input-item{
      width: 45%;
    }
    .input-red{
      color:red;
    }
  }


}

</style>